<template>
  <div class="btns">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>导入</slot>
    </el-button>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      append-to-body
      width="800px"
      @close="form = {}"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="top">
        <div class="item">
          <span class="idx">1</span>
          <span>下载模板</span>
        </div>
        <div class="item">
          <span class="idx">2</span>
          <span>上传文件</span>
        </div>
      </div>
      <div class="card">
        <div class="icon-wrapper">
          <i class="el-icon-download"></i>
        </div>
        <div class="content">
          <p>填写导入数据信息</p>
          <p class="el-upload__tip">
            请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除
          </p>
          <!-- <a
            class="color-light el-button--text"
            :href="downLoadUrl"
            target="_blank"
            download
            >下载模板</a
          > -->
          <downloadFile
            type="text"
            size="mini"
            name="模板"
            :url="downLoadUrl"
            file-type="xlsx"
            >下载模板</downloadFile
          >
        </div>
      </div>
      <div class="card">
        <div class="icon-wrapper">
          <i class="el-icon-upload"></i>
        </div>
        <div class="content">
          <p>上传填好的信息表</p>
          <p class="el-upload__tip">
            文件后缀名必须为xls 或xlsx
            （即Excel格式），文件大小不得大于10M，最多支持导入3000条数据
          </p>
          <Uploader
            :clear="visible"
            ref="uploadFile"
            :limit="1"
            :tips="false"
            :url="upLoadUrl"
            :maxSize="10"
            accept=".xls, .xlsx"
            v-model="form.list"
            :btnProps="btnProps"
            @close="visible = false"
            @success="onSuccess"
          ></Uploader>
        </div>
      </div>
      <!-- <el-alert
				class="padding margin-bottom"
				title="特别提示"
				type="warning"
				show-icon
				:closable="false"
				description="导入过程中如发现同电话客户，且对该客户数据有更新权限，则更新这条客户数据"
      ></el-alert>-->
      <div class="text-right">
        <el-button size="small" @click="handleClose">关 闭</el-button>
        <!-- <el-button size="small" type="primary" native-type="submit">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Uploader from "./upload/file";
/* 添加附件 */
export default {
  components: { Uploader },
  props: {
    showBtn: {
      type: Boolean,
      default: false
    },
    downLoadUrl: {
      type: String,
      default: ""
    },
    upLoadUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      title: "批量导入",
      btnProps: {
        type: "text"
      },
      form: {},
      rules: {}
    };
  },
  methods: {
    handleClose() {
      this.visible = false;
    },
    handleClick() {
      this.visible = true;
    },
    onSuccess() {
      console.log("success");
      this.handleClose();
      this.$emit("refresh");
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  margin-bottom: 20px;
  display: flex;
  .item {
    flex-grow: 1;
    @include flex(center, center);
    .idx {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      background-color: $light;
      color: #fff;
      margin-right: 10px;
    }
  }
}
.card {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  border: 1px solid #ccc;
  .icon-wrapper {
    flex-shrink: 0;
    min-width: 0;
    width: 90px;
    @include flex;
    background: #e4e4e4;
    font-size: 40px;
    @include flex(center, center);
  }
  .content {
    flex-grow: 1;
    min-width: 0;
    padding: 20px;
    min-height: 120px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
